<template>
  <div class="main">
    <van-nav-bar
      title="加好友/群"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <van-tabs type="card" color="#1989fa" v-model="action">
      <van-tab title="加好友"></van-tab>
      <van-tab title="加群"></van-tab>
    </van-tabs>

    <van-search
      v-model="value"
      show-action
      placeholder="请输入"
      @search="onSearch"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>

    <div class="search-box">
      <div class="list" v-for="(v,k) in list" :key="k">
        <img class="avater" :src="v.img">
        <div class="name">{{v.username}}</div>
        <div class="add" @click="add(v.id)">
          <van-button icon="plus" type="info" size="mini"/>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
  /**
   * 加好友
   */
  export default {
    name: "add-first",
    data() {
      return {
        action: 0,
        value: "",
        list:[]
      }
    },
    methods: {
      onClickLeft() {
        this.$router.push({
          path: '/',
        })
      },
      onSearch() {
        var vm = this;
        var router = "/user/search";
        if (this.action == 1) {
          router = "group/search"
        }
        this.$axios.get(router, {
          params: {
            name: vm.value,
          }
        }).then((res => {
          var result = res.data
          if (result.code == 0) {
            vm.list = result.data
          } else {
            vm.$toast(result.msg);
          }
        })).catch((err) => {
          console.log(err)
        })
      },
      //加好友/群
      add(id){
        var vm = this;
        this.$axios.post("/contacts/add", {
          pid:id,
          type:vm.action,
          Remarks:""
        }).then((res => {
          var result = res.data
          if (result.code == 0) {
            vm.$toast("添加成功");
          } else {
            vm.$toast(result.msg);
          }
        })).catch((err) => {
          console.log(err)
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .main {
    .van-tabs--card {
      padding-top: 5px !important;
    }

    .search-box{
      width: 100%;
      height: auto;
      background: white;
      padding-bottom: 50px;
      .list{
        width: 90%;
        margin-left: 5%;
        height: 50px;
        background: white;
        border-bottom: 1px solid #c3c3c3;
        .avater{
          width: 40px;
          height: 40px;
          float: left;
          border-radius: 50%;
          margin-top: 5px;
        }
        .name{
          float: left;
          margin-left: 10px;
          color: #1989fa;
          font-size: 16px;
          margin-top: 10px;
        }
        .add{
          float: right;
          button{
            margin-top: 10px;
          }
        }
      }
    }
  }
</style>
